@charset "utf8";
/*
 设置编码集：utf-8 统一页面效果：文本格式信息，超链接，列表
 效果如同:父元素指定宽高500*200
 小弟们:d1~d5
 宽高
 浮动塌陷:
 原因:页面元素一定嵌套，父元素没设定高度，子元素浮动
 方案1找到没有高度父元素加高度
 方案2父元素溢出，按照子元素宽高进行溢出处理 推荐
 overflow:hidden;
 浮动卡住:父元素宽度不够 子元素高度超过其他子元素
 解决方案1.效果左右布局--浮动  给父元素加宽
           效果两列布局--浮动
 解决方案2：找到卡住元素，添加清除浮动  推荐
 */
*{
font: 16px "微软雅黑";	
	text-decoration: none;
	list-style-type: none;
	margin:0;
	padding: 0;
}
div#sz{
	width: 1200px;
    height: 600px;
	border: 20px solid black;
	overflow: hidden;
	/* 清除浮动 建议明确左右浮动 */
}
div#sz .d1{
	background-image: url("../img/0dd3a525eef94152b511afb2e2c9f3a3.gif");
	background-size: 240px 300px;
	width: 240px;
	height: 300px;
	float: left;
	text-align: center;
	line-height: 240px;
}
div#sz .d2{
	background-image: url("../img/5a4c96c382a04d9dba7cfe005ced0246.gif");
	background-size: 240px 300px;
	width: 240px;
	height: 300px;
	float: left;
	text-align: center;
}
div#sz .d3{
	background-image: url("../img/7a572e5a19fe4682be45ab84f6264473.gif");
	background-size: 240px 300px;
	width: 240px;
	height: 300px;
	float: left;
	text-align: center;
}
div#sz .d4{
	background-image: url("../img/8a15b3bfbbc168df1ddadcb6acff1120.gif");
	background-size: 240px 300px;
	width: 240px;
	height: 300px;
	float: left;
	text-align: center;
}
div#sz .d5{
	background-image: url("../img/ba5d7207e37b0442dafb2ffc0b539b459500.gif");
	background-size: 240px 300px;
	width: 240px;
	height: 300px;
	float: left;
	text-align: center;
}